<template>
	<view class="layout">
		<view class="navbar">
			<view class="statusBar" :style="{height:getstatusBarHeight()+'px'}"></view>
			<view class="titleBar" :style="{height:getTitleBarHeigt() + 'px'}">
				<view class="title">{{title}}</view>
			</view>
			
		</view>
		
		<view class="fill" :style="{height: getNavBarHeight()+'px'}">
			<!-- 这里的高度计算可以避免轮播图被导航栏遮住 -->
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {getstatusBarHeight,getTitleBarHeigt,getNavBarHeight} from "@/utils/system.js"
/* 改变标题 */
defineProps({
	title:{
		type:String,
		default:"租房"
	}
});

// let {top,height} = uni.getMenuButtonBoundingClientRect();/* 获取胶囊按钮的状态 51 32*/
// let titleBarHeigt = (top - statusBarHeight.value)*2+ height;
// console.log(titleBarHeigt);/* 40 */
</script>

<style lang="scss" scoped>
.layout{
	.navbar{
		/* ??????????????? */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background:
		linear-gradient(to bottom,transparent,#fff 450rpx),
		linear-gradient(to right,#beecd8 20%,#F4E2D8);/* 线性渐变 */
		.statusBar{}
		.titleBar{
			display: flex;
			align-items: center;
			padding: 0 3rpx;
			.title{
				font-size: 50rpx;
				font-weight: 700;
				color: $text-font-color-1;
			}
		}
	}
	.fill{
		
	}
}
</style>